<template>
    <div>
        <div>
            <el-row>
                <el-col :span="6" :offset="3">
                    <el-button @click="deleteBatch" type="danger" icon="el-icon-delete" style="margin-left: 20%">批量删除</el-button>
                    <el-button @click="dialogFormVisible=true" type="primary" icon="el-icon-delete" >添加</el-button>
                </el-col>
                <el-col :span="6">
                    姓名：<el-input
                        @input="page(1)"
                        v-model="searchFrom.username"
                        style="width: 200px"
                        placeholder="请输入姓名"></el-input>

                </el-col>
                <el-col :span="6">
                    角色：
                    <el-select
                            clearable
                            @change="page(1)"
                            v-model="value1"
                            placeholder="---请选择---">
                        <el-option
                                v-for="item in options"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value">
                        </el-option>
                    </el-select>
                </el-col>
            </el-row>
            <el-dialog title="添加编码数据" :visible.sync="dialogFormVisible" @close="resetFormOnClose" :destroy-on-close="true">
                <el-form :model="saveForm" :rules="rules" ref="saveForm" label-width="100px" class="demo-ruleForm">

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="昵称" prop="nickname">
                                <el-input v-model="saveForm.nickname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="username">
                                <el-input v-model="saveForm.username"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="saveForm.password"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="电话" prop="telephone">
                                <el-input v-model="saveForm.telephone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="saveForm.email"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="是否启用" prop="lockState">
                                <el-switch
                                        v-model="saveForm.lockState"
                                        inactive-text="启用"
                                        active-text="禁用"
                                        active-color="#ff4949"
                                        inactive-color="#13ce66"
                                        active-value="0"
                                        inactive-value="1"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="角色" prop="role">
                        <el-select v-model="saveForm.role" placeholder="请选择编码类型" clearable>
                            <el-option label="admin" value="admin"></el-option>
                            <el-option label="user" value="user"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="primary" @click="submitForm('saveForm')">立即添加</el-button>
                                <el-button @click="resetForm('saveForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>

            <el-dialog title="更新编码数据" :visible.sync="dialogUpdateForm" >
                <el-form :model="updateForm" :rules="rules" ref="updateForm" label-width="100px" class="demo-ruleForm">
                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="昵称" prop="nickname">
                                <el-input v-model="updateForm.nickname"></el-input>
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="姓名" prop="username">
                                <el-input v-model="updateForm.username"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="密码" prop="password">
                                <el-input type="password" v-model="updateForm.password"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="电话" prop="telephone">
                                <el-input v-model="updateForm.telephone"></el-input>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="12">
                            <el-form-item label="邮箱" prop="email">
                                <el-input v-model="updateForm.email"></el-input>
                            </el-form-item>
                        </el-col>

                        <el-col :span="12">
                            <el-form-item label="是否启用" prop="lockState">
                                <el-switch
                                        v-model="updateForm.lockState"
                                        inactive-text="启用"
                                        active-text="禁用"
                                        active-color="#ff4949"
                                        inactive-color="#13ce66"
                                        active-value="0"
                                        inactive-value="1"
                                >
                                </el-switch>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-form-item label="角色" prop="role">
                        <el-select v-model="updateForm.role" placeholder="请选择编码类型" clearable>
                            <el-option label="admin" value="admin"></el-option>
                            <el-option label="user" value="user"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-row>
                        <el-col>
                            <el-form-item>
                                <el-button type="primary" @click="updateDialogForm('updateForm')">立即更新</el-button>
                                <el-button @click="resetForm('updateForm')">重置</el-button>
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-dialog>
        </div>
        <br>
        <el-table
                ref="multipleTable"
                :data="tableData"
                tooltip-effect="dark"
                style="width: 70%"
                class="ctbox"
                @selection-change="handleSelectionChange">
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="编号"
                    type="index"
                    :index='(index)=>{return (index+1) + (this.currentPage-1)*5}'
                    width="63">
            </el-table-column>
            <el-table-column
                    prop="nickname"
                    label="昵称"
                    width="110">
            </el-table-column>
            <el-table-column
                    prop="username"
                    label="姓名"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="telephone"
                    label="电话号码"
                    width="115">
            </el-table-column>
            <el-table-column
                    prop="email"
                    label="邮箱"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="role"
                    label="角色"
                    width="80">
                <template slot-scope="scope">
                    <el-tag :type="scope.row.role === 'admin'?'success':''" effect="dark">
                        {{scope.row.role}}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column
                    prop="lockState"
                    label="是否启用"
                    width="120">
                <template slot-scope="scope">
                    <el-switch
                            v-model="scope.row.lockState"
                            active-color="#13ce66"
                            inactive-color="#ff4949"
                            @change="changeState($event,scope.row)"
                            active-value="1"
                            inactive-value="0">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column
                    prop="createBy"
                    label="创建人"
                    width="80">
            </el-table-column>
            <el-table-column
                    prop="editBy"
                    label="最近修改人"
                    width="90">
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    align="center"
                    width="130">
                <template slot-scope="scope">
                    <el-row>
                        <el-col :span="12"><el-button type="primary" icon="el-icon-edit" @click="readCodeData(scope.row)" circle></el-button></el-col>
                        <el-col :span="12">
                            <el-popconfirm
                                    confirm-button-text='确定'
                                    cancel-button-text='取消'
                                    icon="el-icon-info"
                                    icon-color="red"
                                    title="确定删除这条数据吗?"
                                    @confirm="deleteOneById(scope.row)"
                            >
                                <el-button slot="reference" type="danger" icon="el-icon-delete" circle></el-button>
                            </el-popconfirm>
                        </el-col>
                    </el-row>
                </template>
            </el-table-column>
        </el-table>

        <br>
        <el-pagination
                background
                style="margin-left: 20%"
                layout="prev, pager, next"
                :page-size="5"
                :current-page="currentPage"
                @current-change="page"
                :total="total">
        </el-pagination>
    </div>

</template>

<script>
    export default {
        name: "UserManager",

        created() {
            this.page(1);
            this.account = JSON.parse(window.localStorage.getItem('access-data'));
            this.saveForm.editBy=this.account.username;
            this.updateForm.editBy=this.account.username;
        },

        methods: {
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },

            page(currentPage){
                const _this = this;
                axios.get('http://127.0.0.1:8081/ICDManagement/user/userQuery/'+currentPage+'/5',{
                    params:{
                        username:_this.searchFrom.username,
                        role:_this.value1
                    }
                }).then(function (res) {
                    _this.currentPage=currentPage;
                    _this.total=parseInt(res.data.total);
                    _this.tableData=res.data.data;
                    console.log(_this.tableData)
                });
            },

            //修改数据的提交表单
            updateDialogForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.put('http://127.0.0.1:8081/ICDManagement/user/userUpdate',this.updateForm).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '修改成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.dialogUpdateForm=false;
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '修改失败',
                                    duration:2000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //批量删除
            deleteBatch(){
                if(this.multipleSelection.length === 0){
                    this.$alert('请至少选择一条记录', '提示', {
                        confirmButtonText: '确定',
                    });
                }else {
                    this.$confirm('此操作将删除选中的全部记录，是否删除?', '提示', {
                        confirmButtonText: '确定',
                        cancelButtonText: '取消',
                        type: 'warning'
                    }).then(() => {
                        const _this = this;
                        var ids = [];
                        this.multipleSelection.forEach((item,index) => {
                            ids.splice(index,0,item.id)
                        })
                        axios.delete('http://127.0.0.1:8081/ICDManagement/user/deleteBatch',{
                            data:ids
                        }).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '删除成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '删除失败',
                                    duration:2000
                                });
                                _this.page(1);
                            }
                        });
                    }).catch(() => {
                        this.$notify.info({
                            message: '已取消删除'
                        });
                    });
                }
            },

            //关闭对话框重置表单
            resetFormOnClose(){
                this.$refs.saveForm.resetFields();
            },

            //提交表单
            submitForm(formName) {
                const _this = this;
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        axios.post('http://127.0.0.1:8081/ICDManagement/user/userSave',this.saveForm).then(function (res) {
                            if(res.data === 'success'){
                                _this.$notify({
                                    title: '成功',
                                    message: '添加成功',
                                    type: 'success',
                                    duration:2000
                                });
                                _this.dialogFormVisible=false;
                                _this.page(1);
                            }else {
                                _this.$notify.error({
                                    title: '错误',
                                    message: '添加失败',
                                    duration:2000
                                });
                            }
                        });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },

            //重置表单
            resetForm(formName) {
                this.$refs[formName].resetFields();
            },

            //删除单条记录
            deleteOneById(row) {
                const _this = this;
                axios.delete('http://127.0.0.1:8081/ICDManagement/user/deleteOne/'+row.id).then(function (res) {
                    if(res.data === 'success'){
                        _this.$notify({
                            title: '成功',
                            message: '删除成功',
                            type: 'success',
                            duration:2000
                        });
                        _this.page(1);
                    }else {
                        _this.$notify.error({
                            title: '错误',
                            message: '删除失败',
                            duration:2000
                        });
                    }
                });
            },

            readCodeData(row){
                this.updateForm.id=row.id;
                this.updateForm.nickname=row.nickname;
                this.updateForm.username=row.username;
                this.updateForm.telephone=row.telephone;
                this.updateForm.email=row.email;
                this.updateForm.role=row.role;
                this.updateForm.createBy=row.createBy;
                this.updateForm.createTime=row.createTime;
                this.updateForm.lockState=row.lockState;
                this.dialogUpdateForm=true;
            },

            changeState($event,row){
                const _this = this;
                axios.put('http://127.0.0.1:8081/ICDManagement/user/updateState/'+row.id+'/'+$event).then(function (res) {
                    if(res.data === 'success'){
                        _this.$notify({
                            title: '成功',
                            message: '修改用户'+row.username+'状态成功',
                            type: 'success',
                            duration:2000
                        });
                    }else {
                        _this.$notify.error({
                            title: '错误',
                            message: '修改用户'+row.username+'状态失败',
                            duration:2000
                        });
                    }
                });
            }

        },

        data() {
            return {
                account:'',
                tableData: [{
                    id:'',
                    nickname:'leLucermaire',
                    username:'陆A',
                    telephone:'18311729931',
                    email:'1097820454@qq.com',
                    role:'admin',
                    lockState:'1',
                    createBy:'陆A',
                    editBy:''
                }],
                multipleSelection: [],
                currentPage:1,
                total:300,

                //添加表单变量
                dialogFormVisible: false,
                formLabelWidth: '120px',
                saveForm: {
                    id:'',
                    nickname:'',
                    username:'',
                    password:'',
                    telephone:'',
                    email:'',
                    role:'',
                    lockState:'',
                    editBy:''
                },

                rules: {
                    username: [
                        { required: true, message: '请输入姓名', trigger: 'blur' },
                        { pattern : /^[\u4e00-\u9fa5]+[A-Za-z\u4e00-\u9fa5]+$/,message: '请输入正确格式的姓名'}
                    ],

                    telephone: [
                        { required: true, message: '请输入手机号', trigger: 'blur' },
                        { pattern: /^1[34578]\d{9}$/, message: '请输入正确的手机号'}
                    ],
                    email: [
                        { required: true, message: '请输入邮箱', trigger: 'blur' },
                        { pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/, message: '请输入正确格式的邮箱'}
                    ],
                    nickname: [
                        { required: true, message: '请输入用户名', trigger: 'blur' },
                        { min: 2,max: 14,message: '长度在 2 到 14 个字符'}
                    ],
                    password: [
                        { required: true, message: '请输入密码', trigger: 'blur' },
                        { min: 5,max: 25,message: '长度在 5 到 25个字符'},
                        { pattern: /^(\w){5,25}$/, message: '只能输入5-25个字母、数字、下划线'}
                    ],
                    role: [
                        { required: true, message: '请选择角色', trigger:'blur' }
                    ]
                },

                //更新表单变量
                dialogUpdateForm:false,
                updateForm: {
                    id:'',
                    nickname:'',
                    username:'',
                    password:'',
                    telephone:'',
                    email:'',
                    role:'',
                    lockState:'',
                    editBy:''
                },

                //搜索框绑定变量
                searchFrom: {
                    username:'',
                    role:'',
                },

                options: [
                    {
                        value: 'admin',
                        key: 'admin',
                    },
                    {
                        value: 'user',
                        key: 'user',
                    }
                ],
                value1: '',
            }
        },
    }
</script>

<style scoped>
    .ctbox {
        margin: 0 auto;
    }
</style>